<template>
      <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '自定义表格组件',
            docList: [
                {
                    label: '引入组件',
                    value: "import { IVxeTable } from 'wd-platform-library'"
                },
                {
                    label: '创建表格对象',
                    type: 'pre',
                    value: `
const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: { //可以配置vxe-table的参数
                columns: [
                ], // 表头配置
                data: [], // 数据集合
                showOverflow:true, //字段值超过展示范围是否隐藏showOverflow
            },
            //调用数据接口
            callback: async (pageInfo: PageInfoInterFace) => {
                    return {
                        resultList:[],
                        total: 10
                    } as ResultInterFace<any>
            },
            //分页配置
            pageInfo:undefined
            //右侧操作栏配置
            operation: {},
            //顶部操作栏配置
            titleOperation: [],
            // 公共方法整体控制
            authControl: {
                export: false, // 是否展示导出
                import: false, // 是否显示导入
                print: false, // 是否显示打印
                isCheckBox: false, // 是否显示复选框
                columnDrop: false, // 是否可以拖拽
                toolbarCustom: false // 展示自定义右上角
                isAutoSelect:false   // 是否自动查询
            }
})`
                },
                {
                    label: 'tableInfo.columns配置',
                    type: 'pre',
                    value: `
{
    field: 'appName', //对应后台返回数据字段
    width: 150,       //列宽度
    minWidth: 200,    //设置最小宽度
    title: '应用名称', //表头名字
    fixed: 'left'     //是否左右浮动
    disable:true,     // 复选框存在 是否禁止选择 
    slots: {          //自定义slot
        default: 'status_template'
    },
    isCheck:true, //是否自定义可选
    format:'time' //格式化表格内容 time:时间   prick:金额   date:日期
    showOverflow:true //是否溢出隐藏
    searchFilter: { //表头搜索
            type: 'select', //input ,select 
            placeholder: '请输入姓名',
            list: [
                    { label: '前端开发', value: '前端' },
                    { label: '后端开发', value: '后端' },
                    { label: '测试', value: '测试' },
                    { label: '程序员鼓励师', value: '程序员鼓励师' }
            ],
            filterMultiple: false
    }
} `
                },
                {
                    label: 'titleOperation顶部操作栏配置',
                    type: 'pre',
                    value: `
titleOperation: [
        {
            label: '添加', //按钮名称
            isShow: authResource([appSecretAuth.add]),  //判断权限
            buttonFun: 'addAppFun', //按钮回调方法
            icon: '123' //按钮图标
        }
]`
                },
                {
                    label: 'operation右侧操作栏配置',
                    type: 'pre',
                    value: `
operation: {
    label: '操作',// 操作栏表头名称
    dataList: [
        {
            label: '编辑',  //按钮名称
            isShow: authResource([appSecretAuth.update]),  //按钮权限
            buttonFun: 'updateFun', //按钮回调方法
            width: 48  //按钮宽度
        },
        {
            label: '删除',  //按钮名称
            isShow: false,  //按钮权限
            buttonFun: 'deleteFun',//按钮回调方法
            width: 48,  //按钮宽度
            remindData: {   //按钮是否需要点击出现确定弹框
                    isShow: true,
                    remindTitle: '是否删除',
                    remindContext: '删除后数据将无法恢复'
            }
        }
    ]
}`
                },
                {
                    label: '分页配置',
                    type: 'pre',
                    value: `
//pageInfo 不传该参数默认值(可按照该格式自定义)
//不需要分页pageInfo:undefined
pageInfo:{    
      options: {}  //配置antdv的分页参数
      total: 0,
      options: {},
      currentPage: 1,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '50', '100', '200', '1000']
}`
                }
            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
